<style type="text/css">
    .flex_none{
        -moz-box-flex: none; /*Firefox*/
        -webkit-box-flex: none; /*Safari,Opera,Chrome*/
        -webkit-box-flex: none;
        -webkit-flex: none;
        -ms-flex: none;
        flex:none;
    }
    .flex_nowrap{
        display:flex;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
        display: -ms-flexbox; /* TWEENER - IE 10 */ 
        display: -webkit-flex; /* NEW - Chrome */ 
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .pro_list li>span{
        width: 100%;
        text-align: center;
    }
    .pro_list li{
        height: 44px;
        line-height: 44px;
        background:#11141D;
        border-bottom: 1px solid #1D2029;
    }
    .bg {
        background: #1B1B1B;
    }
    .pro_list li.pro_l_header{
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        color: rgb(94, 95, 96);
        background:#262834;
    }
    .pro_list li span.pro_name{
        font-size: 14px;
        color:#fff;
    }
    .current_price{
        color: #fff!important;
    }
    .current_price{
        background:#1CBE52;
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        margin-top: 6px;
    }
    .current_price.red{
        background: #F6293B;
    }
    .current_price.green{
        background: #1CBE52;
    }
</style>
<ul class="pro_list">
    <li class="flex_nowrap pro_l_header">
        <span>商品名称</span>
        <span>现价</span>
        <span>最低</span>
        <span>最高</span>
    </li>
    <?php foreach ($products as $product): ?>
    <li class="flex_nowrap liData" data-name="<?= $product->table_name ?>" data-id="<?= $product->id ?>">
        <span class="pro_name"><?= $product->name ?></span>
        <span class="current_price red"><?= $product->dataAll->price ?></span>
        <span class="min_price low red"><?= floatval($product->dataAll->low)?></span>
        <span class="min_price high red"><?= floatval($product->dataAll->high) ?></span>
    </li>
    <?php endforeach ?>
</ul>
<script type="text/javascript">

$(function() {
    $(".liData").click(function() {
        var id = $(this).data('id');
        window.location.href = "<?= url(['site/detail']) ?>?id=" + id;
    })

    // 获取最新数据
    function updateOrder(){
        $.get('/price.json?' + Math.random(), function(newData) {
            $('.pro_list .liData').each(function(){
                var $this = $(this),
                    nowProduct = $this.data('name'),
                    price = parseFloat(newData[nowProduct]),
                    lastPrice = $this.find('.current_price').html();
                //价格箭头跳动
                if (newData[nowProduct] != lastPrice) {
                    $this.find('.current_price').removeClass('red');
                    $this.find('.low').removeClass('red');
                    $this.find('.high').removeClass('red');
                    $this.find('.current_price').removeClass('green');
                    $this.find('.low').removeClass('green');
                    $this.find('.high').removeClass('green');
                }

                if (newData[nowProduct] > lastPrice) {
                    $this.find('.current_price').addClass('red');
                    $this.find('.low').addClass('red');
                    $this.find('.high').addClass('red');
                } else if (newData[nowProduct] < lastPrice) {
                    $this.find('.current_price').addClass('green');
                    $this.find('.low').addClass('green');
                    $this.find('.high').addClass('green');
                }
                $this.find('.current_price').html(newData[nowProduct]);
            });
        }, 'json');
    }
    setInterval(updateOrder, 1000);
});
</script>